import React from 'react';
import {observer, inject} from 'mobx-react';

import {Layout} from 'amis';

import {IMainStore} from '../store';
import {RouteComponentProps, matchPath, Switch, Route} from 'react-router';

import Header from '../component/pageManage/Header'
import AsideNav from '../component/pageManage/AsideNav'
import AddPageModal from "../component/pageManage/AddPageModal";
import AMISRenderer from "../component/AMISRenderer";
import NotFound from "./NotFound";
import {IMenu} from "../store/MenuStore";

export default inject('store')(
    observer(function ({
                           store,
                           location,
                           history
                       }: { store: IMainStore } & RouteComponentProps) {

        const saveMenu = (data: {
            label: string;
            path: string;
            template: number;
            icon?: string;
        }) => {
            store.pageManageStore.addSubMenu(data);
        }

        const routes = () => {
            let menus: IMenu[] = [];
            const getRoutList = (menuArr: IMenu[]) => {
                menuArr.forEach(item => {
                    menus.push(item)
                    if (item.children && item.children.length > 0) {
                        getRoutList(item.children);
                    }
                })
            }
            getRoutList(store.pageManageStore.menuStore.menus)

            return menus.map(item => {
                return {
                    id: item.id,
                    path: item.path,
                    schema: item.schema
                }
            });
        }

        return (
            <div style={{backgroundColor: '#353535'}}>
                <Layout
                    header={<Header store={store}/>}
                    aside={<AsideNav store={store}/>}
                    folded={store.asideFolded}
                    offScreen={store.offScreen}
                >
                    <Switch>
                        {routes().map(item => (
                            <Route
                                key={item.id}
                                path={item.path}
                                render={() => <AMISRenderer schema={item.schema}/>}
                            />
                        ))}
                        <Route component={NotFound}/>
                    </Switch>
                </Layout>

                <AddPageModal
                    show={store.pageManageStore.isAddPageShow}
                    onClose={() => store.pageManageStore.addPageShow(false)}
                    onConfirm={saveMenu}
                    pages={store.pages.concat()}
                />
            </div>
        );
    })
);
